<!--标物选择框-->
<template>
  <div style="height: 500px; overflow: auto;">
    <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="900px" wrapClassName="j-user-select-modal"
      @ok="handleOk" destroyOnClose @visible-change="visibleChange" >
      <a-row>
        <a-col :span="showSelected ? 18 : 24" style="height: auto; ">
          <div style="max-height:100%;">
            <BasicTable ref="tableRef" :columns="columns" :scroll="tableScroll" v-bind="getBindValue" :useSearchForm="true"
              :formConfig="formConfig" :api="listBy" :searchInfo="searchInfo" :rowSelection="rowSelection"
              :indexColumnProps="indexColumnProps" >
              <template #tableTitle></template>
            </BasicTable>
          </div>
        </a-col>       
      </a-row>
    </BasicModal>
  </div>
</template>

<script lang="ts">
import { defineComponent, unref, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { list, listBy } from '../LabChemical.api';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { selectProps } from '/@/components/Form/src/jeecg/props/props';
import { deepEqual } from 'assert';

export default defineComponent({
  name: 'ChemicalSelectModal',
  components: {
    //此处需要异步加载BasicTable
    BasicModal,
    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
      // loading: true,
    }),
  },
  props: {
    ...selectProps,
    //选择框标题
    modalTitle: {
      type: String,
      default: '选择标物',
    },
  },
  emits: ['register', 'getSelectResult'],
  setup(props, { emit}) {
    const tableScroll = ref<any>({ x: false });
    const tableRef = ref();
    //注册弹框
    const [register, { closeModal }] = useModalInner(() => {
      if (window.innerWidth < 900) {
        tableScroll.value = { x: 900 };
      } else {
        tableScroll.value = { x: false };
      }
      setTimeout(() => {
        if (tableRef.value) {
          tableRef.value.setSelectedRowKeys(selectValues['value'] || []);
        }
      }, 800);

    });

    const attrs = useAttrs();
    //表格配置
    const config = {
      canResize: true,//为true控制表格高度跟随框架，超出部分，滚动条显示
      bordered: true,
      size: 'small',

    };
    const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
    const [{ rowSelection, visibleChange, selectValues, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
      listBy,
      getBindValue
    );
    const searchInfo = ref(props.params);
    //查询form
    const formConfig = {
      baseColProps: {
        xs: 24,
        sm: 8,
        md: 6,
        lg: 8,
        xl: 6,
        xxl: 6,
      },
      schemas: [
        {
          label: '标物名称',
          field: 'name',
          component: 'JInput',
        },
        {
          label: '标物类别',
          field: 'type',
          component: 'JInput',
        },
      ],
    };
    //定义表格列
    const columns = [
      {
        title: '标物名称',
        dataIndex: 'name',
        width: 40,
        align: 'left',
      },
      {
        title: '标物类别',
        dataIndex: 'type',
        width: 40,
      },
      {
        title: '标物批号',
        dataIndex: 'batch',
        width: 30,
      },
      {
        title: '生产厂家',
        dataIndex: 'factory',
        width: 40,
      },
      {
        title: '当前库存',
        width: 40,
        dataIndex: 'inventoryNow'
      },
      {
        title: '标物状态',
        dataIndex: 'status_dictText',
        width: 40,
      },

    ];
    //已选择的table信息
    const selectedTable = {
      pagination: false,
      showIndexColumn: false,
      scroll: { y: 390 },
      size: 'small',
      canResize: false,
      bordered: true,
      rowKey: 'id',
      columns: [],
    };
    /**
     * 确定选择
     */
    function handleOk() {
      getSelectResult(() => {
        //回传选项和已选择的值
        emit('getSelectResult', selectRows);
        //清空选中状态
        rowSelection.selectedRowKeys.value=[];
        //关闭弹窗
        closeModal();
      });
    }

    return { 
      //config,
      handleOk,
      searchInfo,
      register,
      indexColumnProps,
      visibleChange,
      getBindValue,
      list,
      listBy,
      formConfig,
      columns,
      rowSelection,
      selectRows,
      selectedTable,
      handleDeleteSelected,
      tableScroll,
      tableRef,
    };
  },
});
</script>
<style>
/* #myTableContainer {
  height: auto;
} */
.ant-col-sm-4 {
  display: block;
  flex: 0 0 30.66666667%;
  max-width: 30.66666667%;
}
</style>
